<template>
	<view>
		<view v-if="status == 1" class="header header_bg1">等待买家付款</view>
		<view v-if="status == 2" class="header header_bg2">等待卖家发货</view>
		<view v-if="status == 3" class="header header_bg3">等待买家收货</view>
		<view v-if="status == 4" class="header header_bg4">交易成功</view>
		<view v-if="status == 5 || status == 6" class="header header_bg1">订单已关闭</view>
		<!-- <view v-if="status != 1 && status != 2 && status != 5 && status != 6 && option.length>0" @click="show2 = true" class="address-section">
			<view class="order-content">
				<view class="img2">
					<image width="48upx" height="48upx" src="./images/express.png" />
				</view>
				<view style="margin-left: 30upx;" class="cen">
					<uni-steps
					id="k-step"
					:options="option"
					direction="column" :active="0">
					</uni-steps>
				</view>
			</view>
		</view> -->
		<!-- <view class="address-section">
			<view class="order-content">
				<view class="img">
					<image width="48upx" height="48upx" src="./images/address.png" />
				</view>
				<view class="cen">
					<view class="top">
						<text class="name">{{res_data.consignee.order_consignee_name}}</text>
						<text class="mobile">{{res_data.consignee.order_consignee_phone}}</text>
					</view>
					<text class="address">
						<text>{{res_data.consignee.order_consignee_address}}</text>
					</text>
				</view>
			</view>
		</view> -->
		<view>
			<view class="goods-section">
				<navigator v-if="storeType" :url="'/pages/Store/storeGoods?id='+res_data.store_id" class="g-header b-b">
					<!-- <image class="logo" src="../../static/store.png"></image> -->
					<text class="name">{{res_data.store_name}}</text>
				</navigator>
				<!-- 商品列表 -->
				<view v-for="(item,index) in res_data.goods_list" :key="index" @click="Navto(item.order_goods_id)" class="g-item">
					<image :src="item.order_goods_img"></image>
					<view class="right">
						<text class="title clamp">{{item.order_goods_name}}</text>
						<text class="spec">{{item.order_goods_spec}}</text>
						<view class="price-box">
							<text class="price">￥{{item.order_goods_price}}</text>
							<text class="number">x {{item.order_goods_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 金额明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">商品金额</text>
					<text class="cell-tip">￥{{price}}</text>
				</view>
				<!-- <view class="yt-list-cell b-b">
					<text class="cell-tit clamp">运费</text>
					<text class="cell-tip">{{res_data.consignee.order_consignee_money>0 ? '￥'+res_data.consignee.order_consignee_money : '免运费'}}</text>
				</view>
				<view v-if="res_data.order.store_redeem_price>0" class="yt-list-cell b-b">
					<text class="cell-tit clamp">优惠金额</text>
					<text class="cell-tip">￥{{res_data.order.store_redeem_price}}</text>
				</view>
				<view v-if="res_data.order.redeem_price>0" class="yt-list-cell b-b">
					<text class="cell-tit clamp">平台立减</text>
					<text class="cell-tip">￥{{res_data.order.redeem_price}}</text>
				</view> -->
				<view style="justify-content: flex-end;" class="yt-list-cell b-b">
					<text class="clamp">实付款</text>
					<text class="cell-tip red">￥<span style="font-size: 34upx;">{{Number(res_data.order.order_money)}}</span></text>
				</view>
			</view>
			<!-- 订单明细 -->
			<view class="yt-list">
				<view v-if="res_data.order.remark" class="yt-list-cell desc-cell b-b">
					<text class="cell-tit clamp">订单备注</text>
					<text class="cell-tip">{{res_data.order.remark}}</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">订单编号</text>
					<text class="cell-tip">{{res_data.order.order_num}}</text><u-icon @click="setClipboardData(res_data.order.order_num)" name="tags" color="#999999" size="28"></u-icon>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">创建时间</text>
					<text class="cell-tip">{{res_data.order.submit_time}}</text>
				</view>
				<view v-if="res_data.order.money_type && res_data.order.money_type!='未支付' && status!=1 && status!=5 && status!=6" class="yt-list-cell b-b">
					<text class="cell-tit clamp">付款方式</text>
					<text class="cell-tip">{{res_data.order.money_type}}</text>
				</view>
				<view v-if="res_data.order.paytime" class="yt-list-cell b-b">
					<text class="cell-tit clamp">付款时间</text>
					<text class="cell-tip">{{res_data.order.paytime}}</text>
				</view>
				<view v-if="res_data.order.fhtime" class="yt-list-cell b-b">
					<text class="cell-tit clamp">发货时间</text> 
					<text class="cell-tip">{{res_data.order.fhtime}}</text>
				</view>
			</view>
			<!-- 底部 -->
			<view style="height: 100upx;"></view><!-- 占位 -->
			<view class="footer">
				<view class="action-box b-t" v-if="status == 1">
					<button class="action-btn" @click="cancelOrder(res_data)">取消订单</button>
					<button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="payOrder()">立即支付</button>
				</view>
				<view class="action-box b-t" v-if="status == 2">
					<button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="txFahuo()">提醒发货</button>
				</view>
				<view class="action-box b-t" v-if="status == 3">
					<!-- <button class="action-btn">申请售后</button>
					<button class="action-btn" @click="show2 = true">查看物流</button> -->
					<button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="receipt()">确认收货</button>
				</view>
				<view class="action-box b-t" v-if="status == 4">
					<button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="deleteOrder()">删除订单</button>
					<!-- <button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom"  @click="show2 = true">查看物流</button> -->
					<!-- <button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="NavtoPingjia()">评价</button> -->
				</view>
				<view class="action-box b-t" v-if="status == 10 || status == 5 || status == 6">
					<button :style="{background:themes.Backgroundshallow,color:themes.BtnColor,borderColor:themes.BtnBorder}" class="action-btn recom" @click="deleteOrder()">删除订单</button>
				</view>
			</view>
		</view>
		<u-popup v-model="show2" mode="center" border-radius="14" width="90%" :closeable="true">
			<view class="popup-head">
				{{logisticList.company}} {{logisticList.LogisticCode}} <u-icon @click="setClipboardData(logisticList.LogisticCode)" name="tags" color="#999999" size="28"></u-icon>
			</view>
			<uni-steps style="padding: 30upx;"
			:options="logisticList.Traces"
			direction="column" :active="0">
			</uni-steps>
		</u-popup>
		<u-popup mode="bottom" :safe-area-inset-bottom="true" v-model="shows">
			<KeyNumber @key="trueOrder" @NavTo="NavTo" ref="child" :show="true" :show2="true"></KeyNumber>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import uniSteps from './components/uni-steps/uni-steps.vue';
	import uniIcons from "./components/uni-icons/uni-icons.vue";
	import KeyNumber from './components/KeyNumber.vue'
	export default {
		computed: {
			...mapState(['themes','storeType'])
		},
		components: {uniSteps,uniIcons,KeyNumber},
		data() {
			return {
				status:0,
				order_id:'',
				show: true,
				show2: false,
				shows: false,
				res_data:{
					store_name:'',
					consignee:{
						id:'',
						order_consignee_address:'',
						order_consignee_money:'',
						order_consignee_name:'',
						order_consignee_phone:'',
						order_consignee_postal:'',
						order_consignee_time:'',
						order_mode:'',
						order_num:'',
					},
					goods_list:[],
					order:{
						id:'',
						member_id:'',
						money_type:'',
						order_money:'',
						order_num:'',
						order_source:'',
						order_status:'',
						order_type:'',
						remark:'',
						store_id:'',
						submit_time:'',
					}
				},
				desc: '', //备注
				logisticList:{
					company:'',
					LogisticCode:'',
					Traces:[],
				},
				option:[],
				price:0,
			}
		},
		onShow(){
			this.orderDetails(this.order_id);
		},
		onLoad(option){
			// this.status = option.status;
			this.order_id = option.order_id;
		},
		methods: {
			orderDetails(order_id){
				this.$https.Order.orderDetails(order_id).then(res => {
					this.res_data = res;
					this.price = 0;
					res.goods_list.forEach(item=>{
						this.price += Number(item.order_goods_num) * Number(item.order_goods_price)
					})
					this.status = res.order.order_status;
					// if(this.status !=1 && this.status !=2 && this.status !=5){
					// 	this.logistics(res.order.order_num);
					// }
				});
			},
			payOrder(){//付款
				uni.navigateTo({
					url: `/pages/Order/pay?order=${this.res_data.order.order_num}&money=${Number(this.res_data.order.order_money)}&type=1`
				})
			},
			cancelOrder(){//取消订单
				uni.showModal({
				    content: '是否确定取消这条订单',
				    success: async e => {
				        if (e.confirm) {
							this.$api.prePage().cancel(this.res_data.order.order_num);
							setTimeout(() => {
								uni.navigateBack();
							}, 800);
				        }
				    }
				})
			},
			deleteOrder(){//删除订单
				uni.showModal({
					content: '是否确定删除这条订单',
					success: async e => {
						if (e.confirm) {
							this.$api.prePage().del(this.res_data.order.order_num);
							setTimeout(() => {
								uni.navigateBack();
							}, 800);
						}
					}
				})
			},
			txFahuo(){//提醒发货
				this.$api.prePage().txFahuo(this.res_data.order.order_num);
			},
			receipt(){//确认收货
				uni.showModal({
					content: '是否确认收货',
					success: async e => {
						if (e.confirm) {
							// this.shows = true;
							this.$api.prePage().receipt(this.res_data.order.order_num,this.res_data);
							setTimeout(() => {
								uni.navigateBack();
							}, 800);
						}
					}
				})
			},
			NavTo(){
				uni.navigateTo({
					url:'/pages/Member/safe/userpass'
				})
			},
			trueOrder(key){
				uni.showLoading({
					title: '请稍后'
				})
				this.$https.Order.checkPayPassword(key).then(res => {
					if(this.$refs.child){
						this.$refs.child.password = '';
						this.$refs.child.close();
					}
					this.shows = false;
					this.$api.prePage().receipt(this.res_data.order.order_num,this.res_data);
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				}).catch(fail=>{
					// uni.hideLoading(); 
					if(this.$refs.child){
						this.$refs.child.password = '';
						this.$refs.child.close();
					}
				});
			},
			Navto(id){//商品跳转
				uni.navigateTo({
					url: '/pages/Goods/product?id='+id
				})
			},
			//发表评价
			NavtoPingjia(){
				console.log(this.res_data)
			},
			//查看物流
			logistics(id){
				this.$https.Order.query(id).then(res => {
					this.logisticList = res;
					if(this.logisticList.Traces.length>0){
						this.option.push(this.logisticList.Traces[0])
					}
				})
			},
			setClipboardData(data) {
				return new Promise((success, fail) => {
					// #ifndef H5
					uni.setClipboardData({ data, success, fail });
					// #endif
			
					// #ifdef H5
					// navigator.clipboard.writeText(data).then(success).catch(fail);
					const textarea = document.createElement('textarea');
					textarea.value = data;
					textarea.readOnly = 'readOnly';
					document.body.appendChild(textarea);
					textarea.select();
					textarea.setSelectionRange(0, data.length);
					document.execCommand('copy');
					textarea.remove();
					success(data);
					// #endif
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	#k-step /deep/ .uni-steps__column-container{
		display: none;
	}
	.u-drawer /deep/ .u-mode-center-box{
		max-height: 90%;
	}
	.popup-head{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		padding-left: 30upx;
		background: #eee;
	}
	page {
		background: #f8f8f8;
	}
	.header{
		width: 100%;
		height: 100upx;
		background: rgba(255,67,106,0.4);
		line-height: 100upx;
		text-indent: 50upx;
		font-size: 32upx;
		color: #fff;
	}
	.header_bg1{
		background: linear-gradient(to right, #4bb0ff, #6149f6);
	}
	.header_bg2{
		background: linear-gradient(to right, rgb(204,108,233),rgb(166,75,230));
	}
	.header_bg3{
		background: linear-gradient(to right, rgb(161,233,16),rgb(19,230,59));
	}
	.header_bg4{
		background: linear-gradient(to right, #FF8E01,#FE5000);
	}
	.address-section {
		padding: 20upx 0;
		background: #fff;
		position: relative;
	
		.order-content {
			position: relative;
			display: flex;
			align-items: center;
			.icon{
				position: absolute;
				top: 30upx;
				right: 20upx;
				font-size: 24upx;
				color: #999;
			}
			.img{
				width: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.img2{
				width: 70upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			image{
				width: 50upx;
				height: 50upx;
			}
		}
	
		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}
	
		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}
	
		.name {
			font-size: 28upx;
			margin-right: 20upx;
		}
		
		.mobile{
			font-size: 26upx;color: #909399;
		}
		
		.address {
			font-size: 28upx;
			margin-top: 6upx;
			margin-right: 20upx;
		}
	
		.icon-you {
			font-size: 32upx;
			color: #909399;
			margin-right: 30upx;
		}
	
		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;
	
		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}
	
		.logo {
			display: block;
			width: 46upx;
			height: 46upx;
			border-radius: 100px;
		}
	
		.name {
			font-size: 30upx;
			color: #606266;
			margin-left: 6upx;
		}
	
		.g-item {
			display: flex;
			margin: 20upx 30upx;
	
			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 10upx;
			}
	
			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}
	
			.title {
				font-size: 30upx;
				color: #303133;
			}
	
			.spec {
				display: block;
				font-size: 26upx;
				color: #909399;
			}
	
			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #303133;
				padding-top: 10upx;
	
				.price {
					margin-bottom: 4upx;
				}
				.number{
					font-size: 26upx;
					color: #606266;
					margin-left: 20upx;
				}
			}
	
			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;
	
		&.cell-hover {
			background: #fafafa;
		}
	
		&.b-b:after {
			left: 30upx;
		}
	
		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;
	
			&.hb {
				background: #ffaa0e;
			}
	
			&.lpk {
				background: #3ab54a;
			}
	
		}
	
		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: #909399;
			margin-left: 8upx;
			margin-right: -10upx;
		}
	
		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #909399;
			margin-right: 10upx;
		}
	
		.cell-tip {
			font-size: 26upx;
			color: #303133;
	
			&.disabled {
				color: #909399;
			}
	
			&.active {
				color: #fa436a;
			}
			&.red{
				color: #fa436a;
			}
		}
	
		&.desc-cell {
			align-items: unset;
			line-height: normal;
			padding: 30upx 30upx 30upx 40upx;
			.cell-tit {
				min-width: 120upx;
			}
		}
	
		.desc {
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: flex-end;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: #606266;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.action-box{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 100upx;
				position: relative;
				padding-right: 30upx;
				.action-btn{
					width: 160upx;
					height: 60upx;
					margin: 0;
					margin-left: 24upx;
					padding: 0;
					text-align: center;
					line-height: 60upx;
					font-size: $font-sm + 2rpx;
					color: $font-color-dark;
					background: #fff;
					border-radius: 100px;
					border: 1upx solid rgba(0,0,0,.2);
					&:after{
						display: none;
						border-radius: 100px;
					}
					&.recom{
						background: #fff9f9;
						color: $base-color;
						// &:after{
						// 	border-color: #f7bcc8;
						// }
					}
				}
		}
	}
</style>
